<template>
  <div>
    <a-form-model ref="form" slot="detail">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="材料编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialSerial">
            <span>{{record.materialSerial}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourType">
            <span>{{record.ghSupplychainSupplier.supplierName}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="材料类型种类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourMoney">
            <span>{{record.ghSupplychainMaterialType != null ? record.ghSupplychainMaterialType.materialTypeClassifyName : ''}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="材料类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourMoney">
            <span>{{record.ghSupplychainMaterialType != null ? record.ghSupplychainMaterialType.materialTypeName : ''}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="材料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectAddress">
            <span>{{record.materialName}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourBeginTime">
            <span>{{record.modelNumber}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourEndTime">
            <span>{{record.specifications}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="品牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workDeadline">
            <span>{{record.brand}}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="市场价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
            <span>￥{{record.marketPrice}}&nbsp;元</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="预算价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">
            <span>￥{{record.estimatedCost}}&nbsp;元</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="成本价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
            <span>￥{{record.costPrice}}&nbsp;元</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="库存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
            <span>{{ record.stock == null ? 0 : record.stock }}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="材料状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isBalanceAccounts">
            <span>{{record.status == 1?'启用':'禁用'}}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="材料图片" prop="quantityInventory" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <img v-if="record.images != null" v-for="(item,index) in record.images" @click="handlePreview(item)" :src="getAvatarView(item)" style="width: 100px;height: 100px;margin-right: 10px;margin-bottom: 10px">
            <span v-if="record.materialImage == null">无</span>
          </a-form-model-item>
        </a-col>

        <!--<a-col :span="24">
          <a-form-model-item label="" prop="quantityInventory" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <img v-if="record.images != null" v-for="(item,index) in record.images" @click="handlePreview(item)" :src="item" style="width:100px;height: 100px;margin-right: 10px">
          </a-form-model-item>
        </a-col>-->
      </a-row>
    </a-form-model>

    <a-modal :visible="previewVisible" :footer="null" centered width="auto" @cancel="handleClose">
      <JReview :path="previewImage" :pathList="record.images"></JReview>
    </a-modal>
  </div>
</template>

<script>

  import { getFileAccessHttpUrl } from '@/api/manage'
  export default {
    name: "basicInformation",
    props: {
      record: {}
    },
    components:{

    },
    data() {
      return {
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        previewImage: '',
        previewVisible: false,
      }
    },
    methods: {
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      async handlePreview(url) {
        this.previewImage = url;
        this.previewVisible = true;
      },
    },

  }
</script>

<style scoped>

</style>